import React, {  useEffect, useState,Key } from 'react'
import { Button, Card, Checkbox, Form, Input, message, Tooltip } from 'antd';
import { Space, Table, Tag } from 'antd';
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import style from './index.module.css';
import { getHosSetListRequest, deleteHosSetFromIdRequest,batchDeleteHosSetRequest } from '@/api/hospital/hospitalSet';
import type { getHosSetListRecords, getHosSetListItemType } from '@/api/hospital/model/hospitalSetType';
import { searchHosFinishPraType } from './type';
import AddHosSet from './addOrUpdateHosSet';
import { useNavigate } from 'react-router-dom';
export default function HospitalSet() {
  const navigate = useNavigate()
  //添加医院请求数据
  const [first, setfirst] = useState<getHosSetListRecords>([])
  //当前页
  const [current, setCurrent] = useState(1)
  //每页个数
  const [pageSize, setPageSize] = useState(3)
  //数据总数量
  const [total, setTotal] = useState(0)
  //加载过程
  const [isLoading, setIsLoading] = useState(false)
  //搜索数据
  const [searchFinish, setSearchFinish] = useState<searchHosFinishPraType>({})
  //定义状态渲染页面
  const [reRender, setReRender] = useState(true)
   //定义一个 保存批量选中的ids的状态
   const [ids, setIds] = useState<Key[]>([]);
  //改变批量删除按钮状态
  const [isSelect,setIsSelect] = useState(true)
  useEffect(() => {
    setIsLoading(true)
    const getHosList = async () => {
      const re = await getHosSetListRequest({
        page: current,
        limit: pageSize,
        ...searchFinish
      })
      setfirst(re.records)
      setTotal(re.total)
      setIsLoading(false)
    }
    getHosList()
  }, [pageSize, current, searchFinish, reRender])
  const columns = [
    {
      title: '序号',
      width: 80,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      dataIndex: 'cz',
      fixed: "right" as 'right',
      width: 120,
      render(_: any, data: getHosSetListItemType) {
        const { id } = data
        return (
          <div>
            <Tooltip title={'修改医院'}>
              <Button type='primary'
                icon={<EditOutlined />}
                className={style.mr}
                onClick={() => {
                  navigate(`/syt/hospital/updatehosSet/${id}`)
                }}
              ></Button>
            </Tooltip>
            <Tooltip title={'删除医院'}>
              <Button type='primary' danger icon={<DeleteOutlined />} onClick={deleteHandle(id)}></Button>
            </Tooltip>
          </div>
        )
      }
    },
  ];
  //当前页和页数改变触发的回调
  const pageChangeHandle = (current: number, pageSize: number) => {
    setCurrent(current)
    setPageSize(pageSize)
  }
  //查询触发的回调
  const searchFinishHandle = (fieldValue: searchHosFinishPraType) => {
    setSearchFinish(fieldValue)
  }
  //添加医院跳转
  const addHosSetHandle = () => {
    navigate('/syt/hospital/addhosSet')
  }
  //删除单个医院
  const deleteHandle = (id: number) => {
    return async () => {
      await deleteHosSetFromIdRequest(id)
      setReRender(!reRender)
      message.success('删除医院成功')
    }
  }
  //批量删除医院
  const batchHosHandle = async () => {
    await batchDeleteHosSetRequest(ids)
    setIsSelect(true)
    setReRender(!reRender)
    message.success("批量删除成功");
  }
  return (
    <div className={style.outer}>
      <Card>
        <Form
          name="basic"
          wrapperCol={{ span: 30 }}
          layout='inline'
          onFinish={searchFinishHandle}
        >
          <Form.Item
            name="hosname"
          >
            <Input placeholder='医院名称' />
          </Form.Item>

          <Form.Item
            name="hoscode"
          >
            <Input placeholder='医院编号' />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset">
              清空
            </Button>
          </Form.Item>
        </Form>
        <div className={style.mt}>
          <Button type='primary' className={style.mr} onClick={addHosSetHandle}>添加</Button>
          <Button type="primary" danger disabled={isSelect} onClick={batchHosHandle}>批量删除</Button>
        </div>
        <Table
          columns={columns}
          dataSource={first}
          className={style.mt}
          rowKey='id'
          bordered
          loading={isLoading}
          scroll={{ x: 1400 }}
          rowSelection={{
            onChange(ids: Key[]){  
              setIsSelect(!ids.length)
              setIds(ids)
            }
          }}
          pagination={{
            current,
            total,
            pageSize,
            pageSizeOptions: [2, 4, 5],
            showSizeChanger: true,
            showTotal(total) {
              return `总共${total}条数据`
            },
            onChange: pageChangeHandle
          }
          }
        />
      </Card>
    </div>
  )
}
